<template>
	<view class="app app-bg">
		<view class="title">您对服务技师满意吗？</view>
		<view class="tips">
			<view
				v-for="item in arr"
				class="tip"
				:key="item"
				:class="{ selected: show(item) }"
				@tap="addTip(item)"
			>
				{{ item }}
			</view>
		</view>
		<view class="stars">
			<text class="text">服务评分</text>
			<u-rate
				inactive-color="#D1D1D1"
				active-color="#FF8820"
				v-model="stars"
				size="44"
				:count="5"
			></u-rate>
		</view>
		<view class="anonym">
			<u-checkbox
				active-color="#24C388"
				v-model="checked"
				label-size="26"
				shape="circle"
				size="28"
			>
				匿名评价
			</u-checkbox>
		</view>
		<view class="btn" @tap="beforeSubmit">提交评价</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			oid: "",
			arr: [],
			tips: [],
			stars: 0,
			content: "",
			style: {
				backgroundColor: "#F5F5F5",
				borderRadius: "12rpx 12rpx 0 0",
				padding: "20rpx",
				fontSize: "26rpx"
			},
			checked: false,
			images: []
		}
	},
	onLoad(opt) {
		if (opt.id) {
			this.oid = opt.id
		} else {
			return vk.toast("参数不足", "none", 1000, () => {
				vk.navigateBack()
			})
		}
		this.init()
	},
	methods: {
		// 初始化
		async init() {
			let res = await vk.callFunction({
				url: "client/user.queryTagsForShifu",
				title: "请求中..."
			})
			if (res.code == 0) this.arr = res.tags
		},
		//操作评价标签
		show(item) {
			return this.tips.indexOf(item) != -1
		},
		addTip(item) {
			let index = this.tips.indexOf(item)
			if (index == -1) {
				this.tips.push(item)
			} else {
				this.tips.splice(index, 1)
			}
		},
		// 操作图片
		addThumb() {
			uni.chooseImage({
				count: 9 - this.images.length,
				sizeType: ["compressed"],
				success: res => {
					this.images = this.images.concat(res.tempFilePaths)
				}
			})
		},
		remove(index) {
			this.images.splice(index, 1)
		},
		// 提交
		async beforeSubmit() {
			const { tips, stars, content, images } = this
			if (tips.length == 0) {
				return vk.toast("请选择评价标签")
			}
			if (stars == 0) {
				return vk.toast("请给服务评分")
			}
			let arr = []
			this.submit(arr)
		},
		submit(arr) {
			const { oid, tips, stars, content, checked } = this
			vk.callFunction({
				url: "client/order.addMyOrderAppraise",
				title: "评价中...",
				data: {
					oid,
					tips,
					stars,
					content,
					checked,
					images: arr
				}
			}).then(() => {
				vk.toast("评价成功", "none", 1000, () => {
					vk.navigateBack()
					uni.$emit("paySuccess")
					uni.$emit("paySuccessTab")
				})
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.app {
	padding: 20rpx;
}

.title {
	font-size: 30rpx;
	font-weight: bold;
	padding-top: 34rpx;
	background-color: #fff;
	border-radius: 12rpx 12rpx 0 0;
	text-align: center;
}

.tips {
	display: flex;
	flex-wrap: wrap;
	padding: 40rpx 94rpx 20rpx;
	background-color: #fff;
	justify-content: space-between;
	.tip {
		width: 156rpx;
		height: 50rpx;
		color: #999999;
		border-radius: 100rpx;
		background-color: #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 30rpx;
		font-size: 26rpx;
		border: 2rpx solid #f6f6f6;
	}
	.selected {
		color: #24C388;
		background-color: rgba(58, 181, 74, 0.05);
		border: 2rpx solid #24C388;
	}
}

.stars {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	background-color: #fff;
	.text {
		margin-right: 20rpx;
	}
}

.content {
	background-color: #fff;
	padding: 20rpx 20rpx 30rpx;
	.count {
		text-align: right;
		color: #999999;
		font-size: 24rpx;
		background-color: #f5f5f5;
		padding: 0 20rpx 20rpx;
		border-radius: 0 0 12rpx 12rpx;
	}
}

.thumbs {
	background-color: #fff;
	padding: 14rpx 0 30rpx 20rpx;
	border-radius: 0 0 12rpx 12rpx;
	display: flex;
	flex-wrap: wrap;
	.upd {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		position: relative;
		margin: 0 10rpx 20rpx 0;
	}
	.u-icon {
		position: absolute;
		z-index: 9;
		top: -10rpx;
		right: -10rpx;
	}
}

.anonym {
	display: flex;
	justify-content: flex-end;
	margin: 50rpx -16rpx 0 0;
}

.btn {
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #fff;
	font-size: 28rpx;
	background-color: #24C388;
	border-radius: 40rpx;
	margin: 140rpx 6rpx 0;
}
</style>
